<template>
	<div>
		<div class="topTitle">系统参数</div>
		<el-form inline :model="query">
			<el-form-item label="分类">
				<el-select v-model="query.category" placeholder="请选择分类" clearable class="width300 margin-right20">
					<el-option label="资金" value="资金"></el-option>
					<el-option label="客服" value="客服"></el-option>
					<el-option label="推广" value="推广"></el-option>
					<el-option label="协议" value="协议"></el-option>
					<el-option label="帮助" value="帮助"></el-option>
					<el-option label="其他" value="其他"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="模糊搜索">
				<el-input v-model="query.description" placeholder="请输入关键字" class="width300 margin-right20"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
				<el-button type="default" icon="el-icon-refresh-right" @click="handleRefresh">重置</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
			<el-table-column type="index" width="55" align="center" label="序号"></el-table-column>
			<!-- <el-table-column prop="title" label="参数标题"></el-table-column> -->
			<el-table-column prop="description" label="参数描述"></el-table-column>
			<el-table-column prop="value" label="参数值" :show-overflow-tooltip="true"></el-table-column>
			<el-table-column prop="category" label="分类"></el-table-column>
			<el-table-column label="操作" width="180" align="center">
				<template slot-scope="scope">
					<el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="margin-top10">
			<el-pagination background layout="->,total, prev, pager, next" :current-page="query.pageNumber"
				:page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
		</div>

		<!-- 编辑弹出框 -->
		<el-dialog :title="'编辑【' + form.description + '】'" :visible.sync="editVisible" width="800px">
			<el-form label-width="70px">
				<el-form-item label="参数值" v-if="form.type.value == 5">
					<uploadLocal :value="fileList" @input="getImgData" :maxCount="99"></uploadLocal>
					<el-input placeholder="参数地址" v-model="form.value" clearable></el-input>
				</el-form-item>
				<el-form-item label="参数值" v-if="form.type.value == 3">
					<uploadLocal :value="fileList" @input="getImgData"></uploadLocal>
					<el-input placeholder="参数地址" v-model="form.value" clearable readonly></el-input>
				</el-form-item>
				<el-form-item label="参数值" v-if="form.type.value == 2">
					<WangEditor v-model="form.value" width="90%"></WangEditor>
				</el-form-item>
				<el-form-item label="参数值" v-if="form.type.value == 1">
					<el-input v-model="form.value"></el-input>
				</el-form-item>
				<el-form-item label="参数值" v-if="form.type.value == 4">
					<el-switch v-model="form.value" active-text="是" active-value="true" inactive-text="否" inactive-value="false"
						active-color="#13ce66" inactive-color="#ff4949">
					</el-switch>
				</el-form-item>
				<el-form-item label="描述">
					<el-input type="textarea" v-model="form.description"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveEdit">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import WangEditor from '@/components/wangeditor'
	import uploadLocal from "@/components/Upload/multiUploadLocal"
	export default {
		name: 'setting',
		components: {
			WangEditor,
			uploadLocal
		},
		data() {
			return {
				query: {
					pageNumber: 1,
					pageSize: 30
				},
				tableData: [],
				editVisible: false,
				pageTotal: 0,
				form: {
					value: '',
					title: null,
					type: {}
				},
				fileList: []
			};
		},
		created() {
			this.getData();
		},
		methods: {
			getImgData(data) {
				this.form.value = data.toString()
			},
			async getData() {
				const res = await this.$get('/admin/config/page', this.query)
				if (res.code == 1000) {
					this.tableData = res.data.list
					this.pageTotal = res.data.totalRow
				}
			},
			// 触发搜索按钮
			handleSearch() {
				this.query.pageNumber = 1
				this.getData();
			},
			handleRefresh() {
				this.query = {
					pageNumber: 1,
					pageSize: 30
				}
				this.getData();
			},
			// 编辑操作
			handleEdit(index, row) {
				this.form = row;
				this.editVisible = true;
				if (row.type == 5 || row.type == 2) {
					if (row.value) {
						this.fileList = []
						let values = row.value.split(',')
						for (let item of values) {
							this.fileList.push({
								url: item
							})
						}
					}
				}
			},
			// 保存编辑
			async saveEdit() {
				if (this.form.type.value) {
					this.form.type = this.form.type.value
				}
				const res = await this.$post('/admin/config/update', this.form)
				if (res.code == 1000) {
					this.$message.success('操作成功')
					this.getData()
					this.editVisible = false
				}
			},
			// 分页导航
			handlePageChange(val) {
				this.query.pageNumber = val
				this.getData();
			}
		}
	};
</script>

<style scoped>

</style>